<template>
  <div>
    <el-form :model="form" :rules="rules" ref="form">
      <!-- 输入框 -->
      <el-form-item label="姓名" prop="name">
        <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
      </el-form-item>
      <el-form-item label="年龄" prop="age">
        <el-input v-model="form.age" placeholder="请输入年龄" type="number"></el-input>
      </el-form-item>
      <el-form-item label="地址" prop="address">
        <el-input v-model="form.address" placeholder="请输入地址"></el-input>
      </el-form-item>
      <!-- 下拉框 -->
      <el-form-item label="籍贯" prop="hometown">
        <el-select v-model="form.hometown" placeholder="请选择地区">
          <el-option label="四川" value="四川"></el-option>
          <el-option label="重庆" value="重庆"></el-option>
          <el-option label="北京" value="北京"></el-option>
          <el-option label="上海" value="上海"></el-option>
        </el-select>
      </el-form-item>
      <!-- radio box -->
      <el-form-item label="性别" prop="sex">
        <el-radio v-model="form.sex" label="男">男</el-radio>
        <el-radio v-model="form.sex" label="女">女</el-radio>
      </el-form-item>
      <!-- check box -->
      <el-form-item label="爱好" prop="hobby">
        <el-checkbox-group v-model="form.hobby">
          <el-checkbox label="唱歌">唱歌</el-checkbox>
          <el-checkbox label="跳舞">跳舞</el-checkbox>
          <el-checkbox label="打游戏">打游戏</el-checkbox>
          <el-checkbox label="打篮球">打篮球</el-checkbox>
        </el-checkbox-group>
      </el-form-item>
      <!-- 多行输入 文本域 -->
      <el-form-item label="备注" prop="remark">
        <el-input
          type="textarea"
          placeholder="请输入备注"
          v-model="form.remark"
        ></el-input>
      </el-form-item>
      <!-- 时间选择 日期选择器-->
      <el-form-item label="出生日期" prop="birth">
        <el-date-picker
          v-model="form.birth"
          placeholder="选择日期"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submit('form')">确认</el-button>
        <el-button>修改</el-button>
      </el-form-item>
    </el-form>
    <!-- 信息 -->
    <!-- 提交过后才出现 -->
    <div :class="inf">
      <p>姓名：{{ form.name }}</p>
      <p>年龄：{{ form.age }}</p>
      <p>地址：{{ form.address }}</p>
      <p>籍贯：{{ form.hometown }}</p>
      <p>性别：{{ form.sex }}</p>
      <p>爱好：{{ form.hobby }}</p>
      <p>备注：{{ form.remark }}</p>
      <p>出生日期：{{ form.birth }}</p>
    </div>
    <!-- 全部为必填项，提交时判断 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        name: "",
        age: "",
        address: "",
        hometown: "",
        sex: "男",
        hobby: [],
        remark: "",
        birth: "",
      },
      rules: {
        name: [
          { required: true, message: "请输入姓名", trigger: "blur" },
          { min: 2, max: 20, message: "长度在2-20个字符以内", trigger: "blur" },
        ],
        age: [
          { required: true, message: "请输入年龄", trigger: "blur" },
          // { type: "number", message: "年龄必须为数字", trigger: "change"  },
        ],
        address: [{ required: true, message: "请输入地址", trigger: "blur" }],
        hometown: [
          { required: true, message: "请选择籍贯", trigger: "change" },
        ],
        sex: [{ required: true }],
        hobby: [
          // { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          { type:'array', required: true, message: "请至少选择一个爱好", trigger: "change" }
        ],
        remark: [{ required: true, message: "请输入备注", trigger: "blur" }],
        birth: [
          { required: true, message: "请选择出生日期", trigger: "change" },
        ],
      },
      temp: "",
      inf: {
        "display-none": true,
      },
    };
  },
  methods: {
    submit(form){
      this.$refs[form].validate((valid)=>{
        if(valid){
          // alert('提交成功!');
          this.$message({
            message:'提交成功！',
            type:'success'
          })
          this.inf["display-none"] = false;
          console.log(this.form.birth)
        }else{
          console.log('提交失败');
          return false;
        }
      })
    }
  },
};
</script>

<style  scoped>
.el-form {
  width: 500px;
  margin: 0 auto;
  border: 1px solid #ccc;
  padding: 10px;
}

.el-form-item__content {
  display: inline-block;
  /* width: 90%; */
}
.display-none {
  display: none;
}
/* .one {
  display: flex;
  justify-content: space-between;
} */
</style>